/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import { Row, Col, Button, Skeleton, Carousel, Tabs, Empty, Select, Statistic, Divider, Image, Tooltip, Modal} from 'antd'
import articlesModel from 'pages/model/articles'
import advertiseModel from 'pages/model/advertise'
import {
  FireTwoTone,
  CloseOutlined,
  FrownOutlined,
  InfoCircleOutlined
} from '@ant-design/icons'
import Link from 'next/link'
import userInfoModel from 'pages/model/user-info'
import categoriesListModel from 'pages/model/categories-manage'
import { storage } from '@/utils/utils'
import ListItem from '@/components/list-item/list-item'
import styles from './content.module.scss'
import noData from '@/public/images/no-data.svg'
const { Option } = Select
const { TabPane } = Tabs
const timeText = ['早上好！', '下午好！', '晚上好！']
function ContentList () { 
  const date = new Date()
  const hours = date.getHours()
  const [listData, setListData] = useState()
  const [dateText, setDateText] = useState(timeText[0])
  const [dataLoding, setDataLoding] = useState(false)
  const [selectListArr, setSelectListArr] = useState([])
  const [userInfo, setUserInfo] = useState()
  // 是否显示广告
  const [adShow, setAdShow] = useState(true)
  const [categories, setCategories] = useState(undefined)
  useEffect(() => {
    // 根据系统时间判断早上、下午、晚上
    if (hours < 12) {
      setDateText(timeText[0])
    } else if (hours < 18) {
      setDateText(timeText[1])
    } else {
      setDateText(timeText[2])
    }
  }, [hours])
  useEffect(() => {
    if (storage.get('isLogin') !== 1) {
      storage.get('next_blog_userInfo')
      storage.get('next_blog_tokens')
      storage.get('isLogin')
    }
  }, [])
  useEffect(() => {
    if (JSON.parse(storage.get('next_blog_userInfo'))?.id) {
      setDataLoding(true)
      articlesModel.getArticlePageList({
        data: {categories, loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id}
      }).then(({datas}) => {
        if (datas && datas.list) {
          setListData(datas.list)
          setDataLoding(false)
        }
      })
    }
  }, [categories])
  // 广告位
  const [advertiseList, setAdvertiseList] = useState([])
  useEffect(() => {
    advertiseModel.getAdvertiseList({
      data: {}
    }).then(({datas}) => {
      if (datas && datas.list) setAdvertiseList(datas.list)
    })
  }, [])
  useEffect(() => {
    categoriesListModel.getTagsList({
      data: {}
    }).then(({datas}) => {
      if (datas && datas.list) {
        setSelectListArr(datas.list)
      }
    })
  }, [])
  const [visible, setVisible] = useState(false)
  useEffect(() => {
    if (JSON.parse(storage.get('next_blog_userInfo'))?.id) {
      userInfoModel.getUserInfoDeatil({
        data: {
          id: JSON.parse(storage.get('next_blog_userInfo'))?.id,
          loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id
        }
      }).then(({datas}) => {
        if (datas) {
          setUserInfo(datas)
          if (datas.infoStatus === 0) setVisible(true)
        }
      })
    }
    
  }, [])
  const callback = (key) => {
    console.log(key)
  }
  const  onChange = (value) => {
    setCategories(value)
  }
  
  const selectList = (
    <Select
      placeholder="标签筛选"
      onChange={onChange}
      style={{width: 200}}
      allowClear
    >
      {
        selectListArr.length && selectListArr.map(item => <Option key={item.id} value={item.id}>
          <span className={styles.hot_tag}>{item.hotCode === 1 ? <FireTwoTone twoToneColor="#ff4d4f" /> : ''} {item.name}</span> 
        </Option>)
      }
    </Select>
  )
  return (
    <div className={styles.content}>
      <Row justify="center" className="content-row">
        <Col xs={24} sm={24} md={16} lg={12} xl={12} className={styles.left}>
          <div style={{background: '#fff'}} className="box">
            <Tabs defaultActiveKey="1" onChange={callback}  tabBarExtraContent={selectList}>
              <TabPane tab="热门" key="1">
                {
                  dataLoding ?
                    <div className={styles.skeleton}>
                      <Skeleton active />
                      <Skeleton.Image  className={styles.skeleton_img} />
                    </div>
                    : 
                    <>
                      {listData && listData.length > 0 ?
                        <>
                          {listData.map((item, index) => <ListItem key={index} data={item} />)}
                        </>
                        :
                        <Empty
                        // 这是个坑 noData是一个对象 {src, height, width}
                          image={noData.src}
                          imageStyle={{
                            height: 100,
                          }}
                          description={
                            <span style={{color: '#808795'}}>暂无数据</span>
                          }
                        >
                        </Empty>
                      }
                    
                    </>
                }
              </TabPane>
              <TabPane tab="关注" key="2">
                <Empty
                // 这是个坑 noData是一个对象 {src, height, width}
                  image={noData.src}
                  imageStyle={{
                    height: 100,
                  }}
                  description={
                    <span style={{color: '#808795'}}>暂无数据</span>
                  }
                >
                </Empty>
              </TabPane>
              <TabPane tab="热榜" key="3">
                <Empty
                  image={noData.src}
                  imageStyle={{
                    height: 100,
                  }}
                  description={
                    <span style={{color: '#808795'}}>暂无数据</span>
                  }
                >
                </Empty>
              </TabPane>
            </Tabs>
            <Divider style={{marginTop: 0, paddingBottom: 15, color: '#86909c'}}><FrownOutlined /> 暂无更多数据</Divider>
          </div>
        </Col>
        <Col   className={styles.right} id="content-right">
          {
            userInfo && <div className={styles.signIn}>
              <div className={styles.signIn_head}>
                <div className={styles.head_left}> <span className={styles.text}>{userInfo.username}，<span>{dateText}</span></span></div>
              </div>
              <Divider dashed={true} style={{margin: '20 0'}}></Divider>
              {
                userInfo.infoStatus  ?
                  <>
                    <div style={{display: 'flex', justifyContent: 'space-between'}}>
                      <Statistic title="发布" value={userInfo.artcilesTotal} />
                      <Statistic title="粉丝" value={userInfo.fansTotal} />
                      <Statistic title="关注" value={userInfo.followersTotal} />
                    </div>
                    <div className={styles.signIn_footer}>
                      <Link prefetch href={{pathname: '/my-info'}}><Button type="primary" block ghost className={styles.my_info}>进入我的主页</Button></Link>
                    </div>
                  </>
                  :
                  <>
                    <div style={{textAlign: 'center', fontSize: 15, color: '#ff4d4f'}}>个人信息未完善，请先完善个人信息！</div>
                    <div className={styles.signIn_footer}>
                      <Link prefetch href={{pathname: '/updateInfo'}}><Button type="primary" block ghost className={styles.my_info}>去完善个人信息</Button></Link>
                    </div>
                  </>
                  
              }
            </div>
          }
          {
            adShow && <div className={styles.carousel}>
              <div className={styles.close} onClick={() => setAdShow(false)}><Tooltip title="关闭广告"><CloseOutlined style={{fontSize: 15, color: '#909090'}} /></Tooltip> </div>
              <Carousel effect="fade">
                {advertiseList.length > 0 && advertiseList.map(item => <div key={item.id}>
                  <a href={item.url} target="_blank" rel="noreferrer"><Image width={240} height={300} style={{objectFit: 'cover'}} preview={false} src={item.imgUrl} alt="" /></a>
                </div>)}
              </Carousel>
              <div className={styles.ad}><div>广告</div></div>
            </div>
          }
          <div className={styles.right_footer}>
            <p>乐一博客 &copy; 2021</p>
            <p>技术支持：Next.js、Antd Design</p>
            <p>联系我：lihaogo0222@163.com</p>
          </div>
        </Col>
      </Row>
      <Modal
        visible={visible}
        title={<span style={{fontSize: 18, lineHeight: '25px'}} ><InfoCircleOutlined style={{color: '#faad14', fontSize: 25}} /> 信息未完善</span>}
        closable={false}
        footer={
          [<Link key="goTo" prefetch href={{pathname: '/updateInfo'}}><Button type="primary"  className={styles.my_info}>去完善</Button></Link>]
        }
      >
        您的个人信息未完善,请先完善个人信息!
      </Modal>
    </div>
  )
}

export default ContentList